import Taro, {Component, Config} from '@tarojs/taro';
import {Picker, View} from '@tarojs/components';
import './index.scss';
import {HxPost} from '../../service/http';
import {getFormatDate, getMonthDay, translateDate} from '../../utils/utils';
import {AtButton} from 'taro-ui';
import HxPage from '../../components/hxPage/hxPage';
import HxInfiniteScroll from '../../components/hxInfiniteScroll/hxInfiniteScroll';

export default class ConsumeListPage extends Component {

    private hasMore = false;
    config: Config = {
        // navigationBarTitleText: '消费记录'
        navigationBarTitleText: ''
    };

    constructor() {
        super(...arguments);
        this.state = {
            startDt: getMonthDay(getFormatDate())[0],
            endDt: getFormatDate(),
            consumeTotal: null,
            consumeList: []
        };
    }

    private pageNo = 1;
    private pageSize = 10;

    getConsumeList() {
        this.hasMore = false;
        let paramList = {
            startDt: translateDate(this.state['startDt']),
            endDt: translateDate(this.state['endDt']),
            pageNo: this.pageNo + '',
            pageSize: this.pageSize + '',
        };

        Taro.showLoading({title: '正在查询消费记录...', mask: true})
            .then(() => {
                return HxPost('consumeList', paramList);
            })
            .then((consumeList: any) => {
                Taro.hideLoading();
                if (consumeList['tradeDetailList']) {
                    this.pageNo += 1;
                    this.hasMore = true;
                    this.setState({
                        consumeList: this.state['consumeList'].concat(consumeList['tradeDetailList'])
                    });
                } else {
                    Taro.showToast({title: '未查询到更多消费记录', icon: 'none', duration: 2 * 1000}).catch();
                }
            })
            .catch((err) => {
                Taro.hideLoading();
                Taro.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
            });
    }

    getConsumeTotal() {
        this.hasMore = false;
        Taro.showLoading({title: '加载中...', mask: true})
            .then(() => {
                let param = {
                    startDt: translateDate(this.state['startDt']),
                    endDt: translateDate(this.state['endDt'])
                };
                return HxPost('consumeTotal', param);
            })
            .then((res) => {
                if (JSON.stringify(res) == '{}') {
                    return Promise.reject({retMsg: '未查询到消费汇总信息'});
                } else {
                    this.setState({
                        consumeTotal: res
                    });
                    return Promise.resolve();
                }
            })
            .then(() => {
                let paramList = {
                    startDt: translateDate(this.state['startDt']),
                    endDt: translateDate(this.state['endDt']),
                    pageNo: this.pageNo + '',
                    pageSize: this.pageSize + '',
                };
                return HxPost('consumeList', paramList);
            })
            .then((consumeList: any) => {
                if (consumeList['tradeDetailList']) {
                    this.pageNo += 1;
                    this.hasMore = true;
                    Taro.hideLoading();
                    this.setState({
                        consumeList: consumeList['tradeDetailList']
                    });
                    return Promise.resolve();
                } else {
                    return Promise.reject({retMsg: '未查询到消费记录'});
                }
            })
            .catch((err) => {
                Taro.hideLoading();
                Taro.showToast({title: err.retMsg || '未知错误', icon: 'none', duration: 2 * 1000}).catch();
            });
    }

    componentDidMount() {
        this.Lower();
    }

    onDateChange(index, data) {
        let nowDate = data.target.value;
        if (index === 1) {
            if (nowDate != this.state['startDt']) {
                this.setState({
                    startDt: nowDate
                });
            }
        } else {
            if (nowDate != this.state['endDt']) {
                this.setState({
                    endDt: nowDate
                });
            }
        }
    }

    Upper() {//加载更多
        if (this.state['consumeTotal']) {
            this.getConsumeList();
        } else {
            this.Lower();
        }
    }

    Lower() {//下拉刷新
        this.pageNo = 1;
        this.setState({
            consumeTotal: null,
            consumeList: []
        });
        this.getConsumeTotal();
    }

    render() {
        // @ts-ignore
        const {startDt, endDt, consumeTotal, consumeList} = this.state;
        return (
            <HxPage>
                <View className='consume'>
                    <View className='consume_total'>
                        <View className='consume_total_row'>
                            <View className='consume_total_item'>
                                <Picker mode='date'
                                        fields='day'
                                        onChange={this.onDateChange.bind(this, 1)}
                                        value={this.state['startDt']}>
                                    <View className='hxPicker'>{startDt}</View>
                                </Picker>
                            </View>
                            <View className='consume_total_item'>
                                <Picker mode='date'
                                        fields='day'
                                        onChange={this.onDateChange.bind(this, 2)}
                                        value={this.state['endDt']}>
                                    <View className='hxPicker'>{endDt}</View>
                                </Picker>
                            </View>
                            <View className='consume_total_item'>
                                <AtButton className='hxButton sm_button'
                                          onClick={this.Lower.bind(this)}>确定</AtButton>
                            </View>
                        </View>
                        <View className='consume_total_row'>
                            <View className='consume_total_item'>合计</View>
                            <View className='consume_total_item'>{consumeTotal.totalCnt || 0}笔</View>
                            <View className='consume_total_item'>{consumeTotal.totalAmount || 0}元</View>
                        </View>
                    </View>
                    <HxInfiniteScroll
                        hasMore={this.hasMore}
                        Upper={this.Upper.bind(this)}
                        Lower={this.Lower.bind(this)}>
                        <View className='consume_list_wrap'>
                            {
                                consumeList.map((item, index) => (
                                    <View key={index} className='consume_list'>
                                        <View className='consume_list_left'>
                                            {item.tradeTime ? item.tradeTime.slice(5) : item.tradeTime}
                                        </View>
                                        <View className='consume_list_mid'>
                                            {item.tradeAddr}
                                        </View>
                                        <View className='consume_list_right'>
                                            {item.amount}元
                                        </View>
                                    </View>
                                ))
                            }
                        </View>
                    </HxInfiniteScroll>
                </View>
            </HxPage>
        );
    }
}
